<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人博客后台管理</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<script src="echarts.js"></script>
<style type="text/css">

    .biaodan{
        position: relative;
        top: 80px;
        width: 1000px;
        margin: 0px auto;
    }
    .layui-table, .layui-table-view {
        margin: 0px;
    }
    .back-button{
        position: absolute;
        right: 40px;
        bottom: 40px;
    }
    .content-table{

    }
    .father{
        width:250px;
        margin: 0px auto;
        position: relative;
    }
    .option-button{
        width: 250px;
        margin: 0px auto;
        position: absolute;
        top: 90px;

    }
    .content{
        background-color: #eaeaea;
    }
    .edit-save{
        width: 100px;
        margin: 0px auto;
        position: relative;
        top: 40px;
        display: none;

    }
    #main{
        position: absolute;
        right: 10px;
        display: inline;
    }
    .bangdan{
        background-color: white;
        width: 680px;
        display: inline-block;
        margin-left: 10px;
    }
    #container{
        top: 300px;
        position: absolute;
        right: 30px;
        display: inline;
    }
</style>

<body class="layui-layout-body body-init">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">个人博客后台</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" class="admin">

                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="login.html">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item"><a href="">首页</a></li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">文章管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="published-article">已发布的文章</a></dd>
                        <dd><a href="javascript:;" class="drafts">文章草稿箱</a></dd>
                        <dd><a href="javascript:;" class="mark-article">标记的文章</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">留言管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="articles">查看留言</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">我要发布</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="issue-articles">发布文章</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">粉丝管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="search-fans">查看粉丝</a></dd>


                    </dl>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body content">
        <!-- 内容主体区域 -->
        <div class="layui-tab bangdan">
            <ul class="layui-tab-title">
                <li class="layui-this">今日榜单</li>
                <li>今日热搜</li>
                <li>今日热帖</li>
                <li>今日要闻</li>
                <li>今日榜单</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show"><table id="demo" lay-filter="demo"></table></div>
                <div class="layui-tab-item"><table id="demo11" lay-filter="demo11"></table></div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>
            </div>
        </div>
        <div id="main" style="width: 400px;height:275px;"></div>
        <div id="container" style="width: 350px;height:275px;"></div>

        <script type="text/javascript" src="echarts.js"></script>
        <script type="text/javascript">
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            option = {
                title : {
                    text: '用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问','手机客户端','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'手机客户端'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        </script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '今日数据统计'
                },
                tooltip: {},
                legend: {
                    data:['数量']
                },
                xAxis: {
                    data: ["发表文章量","留言量","访问量","删除量","收藏量","分享量"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [1252, 1233, 2343, 1032, 1043, 2043]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script src="./layui/layui.all.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="barDemo1">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="publish">发布</a>
</script>
<script type="text/html" id="barDemo2">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="looking">查看留言</a>
    <!--  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>

<script>
    var $=layui.jquery;

    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        table.render({
            elem: '#demo'
            ,height: 550
            ,url: '/getarticle.action' //数据接口
            ,initSort: {
                field: 'look' //排序字段，对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            ,cols: [[ //表头
                {field: 'aname', title: '文章标题', width:180,fixed: 'left'}
                ,{field: 'time', title: '发表时间', width:180}
                ,{field: 'look', title: '访问量', width:80,sort: true}
                ,{fixed: 'right', width:180, align:'center', toolbar: '#barDemo'}

            ]]
            ,limit:12
            ,limits:[10, 20, 30, 40, 50]
            ,page:true
        });
        table.render({
            elem: '#demo11'
            ,height: 550
            ,url: '/getarticle.action' //数据接口
            ,initSort: {
                field: 'skr' //排序字段，对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            ,cols: [[ //表头
                {field: 'aname', title: '文章标题', width:180,fixed: 'left'}
                ,{field: 'time', title: '发表时间', width:180}
                ,{field: 'skr', title: '搜索指数', width:110,sort: true}
                ,{fixed: 'right', width:160, align:'center', toolbar: '#barDemo'}

            ]]
            ,limit:12
            ,limits:[10, 20, 30, 40, 50]
            ,page:true
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                $(".content").empty().append($('<div class="content-table"><table class="layui-table" lay-even="" lay-skin="line" id="editdata">\n' +
                    '  <thead>\n' +
                    '    <tr>\n' +
                    '      <th>文章标题</th>\n' +
                    '    </tr> \n' +
                    '  </thead>\n' +
                    '  <tbody>\n' +
                    '    <tr>\n' +
                    '      <td class="canedit firtonfcus">'+data.aname+'</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td>用户</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td class="canedit">'+data.author+'</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td>发表时间</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td >'+data.time+'</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td>文章内容</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td class="canedit">'+data.content+'</td>\n' +
                    '    </tr>\n' +
                    '  </tbody>\n' +
                    '</table>' +'<div class="father"><div class="edit-save">'+
                    '<button class="layui-btn layui-btn-sm layui-btn-warm save">保存</button><button class="layui-btn layui-btn-sm cancel">取消</button>'+
                    '</div>'+
                    '<div class="option-button"> <button class="layui-btn layui-btn-sm layui-btn-primary">\n'+
                    '<i class="layui-icon">&#xe603;</i>' +
                    '</button><button class="layui-btn layui-btn-sm layui-btn-primary">'+
                    '<i class="layui-icon">&#xe602;</i>'+
                    '</button><button class="layui-btn layui-btn-sm layui-btn-primary edit">'+
                    '<i class="layui-icon">&#xe642;</i>'+
                    '</button>' +
                    '<button class="layui-btn layui-btn-sm layui-btn-primary delete">'+
                    '<i class="layui-icon">&#xe640;</i>'+
                    '</button><button class="layui-btn layui-btn-sm layui-btn-primary">'+
                    '<i class="layui-icon">&#xe641;</i>'+
                    '</button></div></div>' +
                    '<div class="back-button"> <button class="layui-btn back">\n' +
                    '  <i class="layui-icon">&#xe603;</i> 返回\n' +
                    '</button></div></div>'));
                $(".delete").click(function () {

                    layer.confirm('确定删除？',{
                        btn:['确定','取消']
                    },function (index ,layero) {
                            $.ajax({
                                url:"/delete.action",
                                type:"POST",
                                data:{"id":data.id},
                                dataType:"json"
                            }).done(function (data) {
                                layer.alert(data.msg);
                                $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
                                table.render({
                                    elem: '#demo'
                                    ,height: 550
                                    ,url: '/getarticle.action' //数据接口
                                    ,cols: [[ //表头
                                        {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                                        ,{field: 'author',edit: 'text', title: '用户', width:130}
                                        ,{field: 'aname', title: '文章标题', width:210}
                                        ,{field: 'time', title: '发表时间', width:210, sort: true}
                                        ,{field: 'look', title: '访问量', width:100,sort: true}
                                        ,{field: 'skr', title: '点赞量', width: 100, sort: true}
                                        ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}

                                    ]]
                                    ,limit:12
                                    ,limits:[10, 20, 30, 40, 50]
                                    ,page:true
                                });
                            })
                    }
                    )

                })
                $(".edit").click(function () {
                    $(".canedit").attr("contentEditable","true");
                    $(".firtonfcus").focus();
                    $(".edit-save").css("display","block");
                    $(".save").click(function () {
                        var data1=$("#editdata").find("tr").eq(1).find("td").text();
                        var data2=$("#editdata").find("tr").eq(3).find("td").text();
                        var data3=$("#editdata").find("tr").eq(7).find("td").text();
                        var data4=data.id;
                        $.ajax({
                            url:"/update.action",
                            type:"POST",
                            data:{"data1":data1,"data2":data2,"data3":data3,"data4":data4},
                            dataType:"json"
                        }).done(function (data) {
                            layer.alert(data.msg);
                        });
                    })
                    $(".cancel").click(function () {
                        $(".content").empty().append($('<div class="content-table"><table class="layui-table" lay-even="" lay-skin="line" id="editdata">\n' +
                            '  <thead>\n' +
                            '    <tr>\n' +
                            '      <th>文章标题</th>\n' +
                            '    </tr> \n' +
                            '  </thead>\n' +
                            '  <tbody>\n' +
                            '    <tr>\n' +
                            '      <td class="canedit firtonfcus">'+data.aname+'</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td>用户</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td class="canedit">'+data.author+'</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td>发表时间</td>\n' +
                            '    </tr>\n' +
                            '      <td >'+data.time+'</td>\n' +
                            '    <tr>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td>文章内容</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td class="canedit">'+data.content+'</td>\n' +
                            '    </tr>\n' +
                            '  </tbody>\n' +
                            '</table>' +'<div class="father"><div class="edit-save">'+
                            '<button class="layui-btn layui-btn-sm layui-btn-warm save">保存</button><button class="layui-btn layui-btn-sm cancel">取消</button>'+
                            '</div>'+
                            '<div class="option-button"> <button class="layui-btn layui-btn-sm layui-btn-primary">\n'+
                            '<i class="layui-icon">&#xe603;</i>' +
                            '</button><button class="layui-btn layui-btn-sm layui-btn-primary">'+
                            '<i class="layui-icon">&#xe602;</i>'+
                            '</button><button class="layui-btn layui-btn-sm layui-btn-primary edit">'+
                            '<i class="layui-icon">&#xe642;</i>'+
                            '</button>' +
                            '<button class="layui-btn layui-btn-sm layui-btn-primary delete">'+
                            '<i class="layui-icon">&#xe640;</i>'+
                            '</button><button class="layui-btn layui-btn-sm layui-btn-primary">'+
                            '<i class="layui-icon">&#xe641;</i>'+
                            '</button></div></div>' +
                            '<div class="back-button"> <button class="layui-btn back">\n' +
                            '  <i class="layui-icon">&#xe603;</i> 返回\n' +
                            '</button></div></div>'));
                    })
                })

                $(".back").click(function () {
                    $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
                    table.render({
                        elem: '#demo'
                        ,height: 550
                        ,url: '/getarticle.action' //数据接口
                        ,cols: [[ //表头
                            {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                            ,{field: 'author',edit: 'text', title: '用户', width:130}
                            ,{field: 'aname', title: '文章标题', width:210}
                            ,{field: 'time', title: '发表时间', width:210, sort: true}
                            ,{field: 'look', title: '访问量', width:100,sort: true}
                            ,{field: 'skr', title: '点赞量', width: 100, sort: true}
                            ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}

                        ]]
                        ,limit:12
                        ,limits:[10, 20, 30, 40, 50]
                        ,page:true
                    });
                })

            } else if(obj.event === 'del'){
                layer.confirm('确定删除？',{
                        btn:['确定','取消']
                    },function (index ,layero) {
                        $.ajax({
                            url:"/delete.action",
                            type:"POST",
                            data:{"id":data.id},
                            dataType:"json"
                        }).done(function (data) {
                            layer.alert(data.msg);
                            $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
                            table.render({
                                elem: '#demo'
                                ,height: 550
                                ,url: '/getarticle.action' //数据接口
                                ,cols: [[ //表头
                                    {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                                    ,{field: 'author',edit: 'text', title: '用户', width:130}
                                    ,{field: 'aname', title: '文章标题', width:210}
                                    ,{field: 'time', title: '发表时间', width:210, sort: true}
                                    ,{field: 'look', title: '访问量', width:100,sort: true}
                                    ,{field: 'skr', title: '点赞量', width: 100, sort: true}
                                    ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}

                                ]]
                                ,limit:12
                                ,limits:[10, 20, 30, 40, 50]
                                ,page:true
                            });
                        })
                    }
                )

            } else if(obj.event === 'edit'){
                $(".content").empty().append($('<div class="content-table"><table class="layui-table" lay-even="" lay-skin="line" id="editdata">\n' +
                    '  <thead>\n' +
                    '    <tr>\n' +
                    '      <th>文章标题</th>\n' +
                    '    </tr> \n' +
                    '  </thead>\n' +
                    '  <tbody>\n' +
                    '    <tr>\n' +
                    '      <td class="canedit firtonfcus">'+data.aname+'</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td>用户</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td class="canedit">'+data.author+'</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td>发表时间</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td >'+data.time+'</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td>文章内容</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td class="canedit">'+data.content+'</td>\n' +
                    '    </tr>\n' +
                    '  </tbody>\n' +
                    '</table>' +'<div class="father"><div class="edit-save">'+
                    '<button class="layui-btn layui-btn-sm layui-btn-warm save">保存</button><button class="layui-btn layui-btn-sm cancel">取消</button>'+
                    '</div>'+
                    '<div class="option-button"> <button class="layui-btn layui-btn-sm layui-btn-primary">\n'+
                    '<i class="layui-icon">&#xe603;</i>' +
                    '</button><button class="layui-btn layui-btn-sm layui-btn-primary">'+
                    '<i class="layui-icon">&#xe602;</i>'+
                    '</button><button class="layui-btn layui-btn-sm layui-btn-primary edit">'+
                    '<i class="layui-icon">&#xe642;</i>'+
                    '</button>' +
                    '<button class="layui-btn layui-btn-sm layui-btn-primary delete">'+
                    '<i class="layui-icon">&#xe640;</i>'+
                    '</button><button class="layui-btn layui-btn-sm layui-btn-primary">'+
                    '<i class="layui-icon">&#xe641;</i>'+
                    '</button></div></div>' +
                    '<div class="back-button"> <button class="layui-btn back">\n' +
                    '  <i class="layui-icon">&#xe603;</i> 返回\n' +
                    '</button></div></div>'));
                $(".canedit").attr("contentEditable","true");
                $(".firtonfcus").focus();
                $(".edit-save").css("display","block");
                $(".save").click(function () {
                    var data1=$("#editdata").find("tr").eq(1).find("td").text();
                    var data2=$("#editdata").find("tr").eq(3).find("td").text();
                    var data3=$("#editdata").find("tr").eq(7).find("td").text();
                    var data4=data.id;
                    $.ajax({
                        url:"/update.action",
                        type:"POST",
                        data:{"data1":data1,"data2":data2,"data3":data3,"data4":data4},
                        dataType:"json"
                    }).done(function (data) {
                        layer.alert(data.msg);
                    });
                })
                $(".delete").click(function () {
                    layer.confirm('确定删除？',{
                            btn:['确定','取消']
                        },function (index ,layero) {
                            $.ajax({
                                url:"/delete.action",
                                type:"POST",
                                data:{"id":data.id},
                                dataType:"json"
                            }).done(function (data) {
                                layer.alert(data.msg);
                                $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
                                table.render({
                                    elem: '#demo'
                                    ,height: 550
                                    ,url: '/getarticle.action' //数据接口
                                    ,cols: [[ //表头
                                        {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                                        ,{field: 'author',edit: 'text', title: '用户', width:130}
                                        ,{field: 'aname', title: '文章标题', width:210}
                                        ,{field: 'time', title: '发表时间', width:210, sort: true}
                                        ,{field: 'look', title: '访问量', width:100,sort: true}
                                        ,{field: 'skr', title: '点赞量', width: 100, sort: true}
                                        ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}

                                    ]]
                                    ,limit:12
                                    ,limits:[10, 20, 30, 40, 50]
                                    ,page:true
                                });
                            })
                        }
                    )

                })
                $(".cancel").click(function () {
                    $(".content").empty().append($('<div class="content-table"><table class="layui-table" lay-even="" lay-skin="line" id="editdata">\n' +
                        '  <thead>\n' +
                        '    <tr>\n' +
                        '      <th>文章标题</th>\n' +
                        '    </tr> \n' +
                        '  </thead>\n' +
                        '  <tbody>\n' +
                        '    <tr>\n' +
                        '      <td class="canedit firtonfcus">'+data.aname+'</td>\n' +
                        '    </tr>\n' +
                        '    <tr>\n' +
                        '      <td>用户</td>\n' +
                        '    </tr>\n' +
                        '    <tr>\n' +
                        '      <td class="canedit">'+data.author+'</td>\n' +
                        '    </tr>\n' +
                        '    <tr>\n' +
                        '      <td>发表时间</td>\n' +
                        '    </tr>\n' +
                        '    <tr>\n' +
                        '      <td >'+data.time+'</td>\n' +
                        '    </tr>\n' +
                        '    <tr>\n' +
                        '      <td>文章内容</td>\n' +
                        '    </tr>\n' +
                        '    <tr>\n' +
                        '      <td class="canedit">'+data.content+'</td>\n' +
                        '    </tr>\n' +
                        '  </tbody>\n' +
                        '</table>' +'<div class="father"><div class="edit-save">'+
                        '<button class="layui-btn layui-btn-sm layui-btn-warm save">保存</button><button class="layui-btn layui-btn-sm cancel">取消</button>'+
                        '</div>'+
                        '<div class="option-button"> <button class="layui-btn layui-btn-sm layui-btn-primary">\n'+
                        '<i class="layui-icon">&#xe603;</i>' +
                        '</button><button class="layui-btn layui-btn-sm layui-btn-primary">'+
                        '<i class="layui-icon">&#xe602;</i>'+
                        '</button><button class="layui-btn layui-btn-sm layui-btn-primary edit">'+
                        '<i class="layui-icon">&#xe642;</i>'+
                        '</button>' +
                        '<button class="layui-btn layui-btn-sm layui-btn-primary delete">'+
                        '<i class="layui-icon">&#xe640;</i>'+
                        '</button><button class="layui-btn layui-btn-sm layui-btn-primary">'+
                        '<i class="layui-icon">&#xe641;</i>'+
                        '</button></div></div>' +
                        '<div class="back-button"> <button class="layui-btn back">\n' +
                        '  <i class="layui-icon">&#xe603;</i> 返回\n' +
                        '</button></div></div>'));
                })
                $(".back").click(function () {
                    $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
                    table.render({
                        elem: '#demo'
                        ,height: 550
                        ,url: '/getarticle.action' //数据接口
                        ,cols: [[ //表头
                            {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                            ,{field: 'author',edit: 'text', title: '用户', width:130}
                            ,{field: 'aname', title: '文章标题', width:210}
                            ,{field: 'time', title: '发表时间', width:210, sort: true}
                            ,{field: 'look', title: '访问量', width:100,sort: true}
                            ,{field: 'skr', title: '点赞量', width: 100, sort: true}
                            ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}

                        ]]
                        ,limit:12
                        ,limits:[10, 20, 30, 40, 50]
                        ,page:true
                    });
                })
            }else if(obj.event==='publish'){

                    console.log("nnn");
                        $.ajax({
                            url:"/draftpublish.action",
                            type:"POST",
                            data:{"id":data.id},
                            dataType:"json"
                        }).done(function (data) {
                            layer.alert(data.msg);
                            $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
                            table.render({
                                elem: '#demo'
                                ,height: 550
                                ,url: '/getdraftarticles.action' //数据接口
                                ,cols: [[ //表头
                                    {field: 'id', title: 'ID', width:130, sort: true, fixed: 'left'}
                                    ,{field: 'aname', title: '文章标题', width:250}
                                    ,{field: 'author',edit: 'text', title: '用户名', width:150}
                                    ,{field: 'time', title: '加入时间', width:250, sort: true}
                                    ,{fixed: 'right', width:380, align:'center', toolbar: '#barDemo1'}
                                ]]
                                ,limit:12
                                ,limits:[10, 20, 30, 40, 50]
                                ,page:true
                            });
                        }).fail(function () {
                            layer.alert("发布失败！")
                        })

            }else  if (obj.event === 'looking') {
                console.log("nihao");
                $.ajax({
                    url: "/getmessage.action",
                    type: "POST",
                    data: {"id": data.id},
                    dataType: "json"
                }).done(function (data) {
                    var len=data.length;
                    if(len==0){
                        layer.msg("暂时无留言");
                    }else {
                        $(".content").empty();
                        $(".content").append($('<div class="content-table"><table class="layui-table" lay-even="" lay-skin="line" id="editdata">\n' +
                            '  <thead>\n' +
                            '    <tr>\n' +
                            '      <th>文章标题</th>\n' +
                            '    </tr> \n' +
                            '  </thead>\n' +
                            '  <tbody>\n' +
                            '    <tr>\n' +
                            '      <td class="canedit firtonfcus">'+data[0].aname+'</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td>作者</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td class="canedit">'+data[0].author+'</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td>发表时间</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td >'+data[0].time+'</td>\n' +
                            '    </tr>\n' +

                            '  </tbody>\n' +
                            '</table>' +
                            '</div>' +
                            '<div class="back-button"> <button class="layui-btn back">\n' +
                            '  <i class="layui-icon">&#xe603;</i> 返回\n' +
                            '</button></div></div>'));
                        var i=0;
                        a=1;
                        while(i<len){
                            $(".layui-table").append($('<tr><td>留言'+a+':</td></tr><tr><td>'+data[i].messages+'</td></tr>') );
                            i++;
                            ++a;

                        }
                    }


                });
            }
        });


    });
</script>

<script type="text/javascript">
    //JavaScript代码区域
    var $ =layui.jquery;
    var element = layui.element;
    var table = layui.table;
    var form=layui.form;
    $(".issue-articles").click(function () {
        $(".content").empty().append($('<form class="layui-form biaodan" action="">\n' +
            '    <div class="layui-form-item">\n' +
            '        <label class="layui-form-label">文章标题</label>\n' +
            '        <div class="layui-input-block">\n' +
            '            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-form-item">\n' +
            '        <label class="layui-form-label">作者</label>\n' +
            '        <div class="layui-input-block">\n' +
            '            <input type="text" name="author" required  lay-verify="required" placeholder="请输入您的笔名" autocomplete="off" class="layui-input">\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-form-item">\n' +
            '        <label class="layui-form-label">选择权限</label>\n' +
            '        <div class="layui-input-inline">\n' +
            '            <select name="limit" lay-verify="required">\n' +
            '                <option value="0">公开</option>\n' +
            '                <option value="1">仅自己查看</option>\n' +
            '                <option value="2">仅好友查看</option>\n' +
            '            </select>\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-form-item">\n' +
            '        <label class="layui-form-label">分类</label>\n' +
            '        <div class="layui-input-block">\n' +
            '            <input type="checkbox" name="like[write]" title="情感">\n' +
            '            <input type="checkbox" name="like[read]" title="影视" checked>\n' +
            '            <input type="checkbox" name="like[dai]" title="八卦">\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-form-item">\n' +
            '        <label class="layui-form-label">是否标记</label>\n' +
            '        <div class="layui-input-block">\n' +
            '            <input type="radio" name="tag" value="1" title="是">\n' +
            '            <input type="radio" name="tag" value="0" title="否" checked>\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-form-item layui-form-text">\n' +
            '        <label class="layui-form-label">文章内容</label>\n' +
            '        <div class="layui-input-block">\n' +
            '            <textarea name="text" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-form-item">\n' +
            '        <div class="layui-input-block">\n' +
            '            <button class="layui-btn" lay-submit lay-filter="formDemo">立即发布</button>\n' +
            '            <button class="layui-btn caogao">加入草稿箱</button>\n' +
            '            <button type="reset" class="layui-btn layui-btn-primary init-button">全部清空</button>\n' +
            '        </div>\n' +
            '    </div>\n' +
            '</form>'));
            form.on('submit(formDemo)', function(data){
            $.ajax({
                url:"/publisharticles.action",
                type:"POST",
                data:$(".biaodan").serialize(),
                dataType:"json"
            }).done(function (data) {
                layer.alert(data.msg);
            })
            return false;
        });
             $(".init-button").trigger('click');
             $(".caogao").click(function () {
                 $.ajax({
                     url:"/draftcontroller.action",
                     type:"POST",
                     data:$(".biaodan").serialize(),
                     dataType:"json"
                 }).done(function (data) {
                     layer.alert(data.msg)
                 })
                 return false;
             })
    })
    $(".drafts").click(function () {
        $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
        table.render({
            elem: '#demo'
            ,height: 550
            ,url: '/getdraftarticles.action' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:130, sort: true, fixed: 'left'}
                ,{field: 'aname', title: '文章标题', width:250}
                ,{field: 'author',edit: 'text', title: '用户名', width:150}
                ,{field: 'time', title: '加入时间', width:250, sort: true}
                ,{fixed: 'right', width:380, align:'center', toolbar: '#barDemo1'}
            ]]
            ,limit:12
            ,limits:[10, 20, 30, 40, 50]
            ,page:true
        });
    })
    $(".mark-article").click(function () {
        $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
        table.render({
            elem: '#demo'
            ,height: 550
            ,url: '/getmarkarticles.action' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:115, sort: true, fixed: 'left'}
                ,{field: 'aname', title: '文章标题', width:210}
                ,{field: 'time', title: '发表时间', width:210, sort: true}
                ,{field: 'look', title: '访问量', width:130,sort: true}
                ,{field: 'skr', title: '点赞量', width: 130, sort: true}
                ,{fixed: 'right', width:360, align:'center', toolbar: '#barDemo'}

            ]]
            ,limit:12
            ,limits:[10, 20, 30, 40, 50]
            ,page:true
        });
    })
    $(".articles").click(function () {
        $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
        table.render({
            elem: '#demo'
            ,height: 550
            ,url: '/getarticle.action' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                ,{field: 'author',edit: 'text', title: '作者', width:130}
                ,{field: 'aname', title: '发布的文章标题', width:210}
                ,{field: 'time', title: '发表时间', width:210, sort: true}
                ,{field: 'look', title: '访问量', width:100,sort: true}
                ,{field: 'skr', title: '点赞量', width: 100, sort: true}
                ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo2'}

            ]]
            ,limit:12
            ,limits:[10, 20, 30, 40, 50]
            ,page:true
        });
    }),

    $(".search-fans").click(function () {
        $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
        table.render({
            elem: '#demo'
            ,height: 550
            ,url: '/getfans.action' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:150, sort: true, fixed: 'left'}
                ,{field: 'name', title: '用户名', width:180}
                ,{field: 'allfans', title: '总粉丝量', width:260,sort: true}
                ,{field: 'addfans', title: '增加粉丝量', width:260, sort: true}
                ,{field: 'delfans', title: '减少粉丝量', width:260,sort: true}
//                    ,{field: 'skr', title: '点赞量', width: 100, sort: true}
//                    ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}

            ]]
            ,limit:12
            ,limits:[10, 20, 30, 40, 50]
            ,page:true
        });
    })
    $(".published-article").click(function () {
        $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
        table.render({
            elem: '#demo'
            ,height: 550
            ,url: '/getarticle.action' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                ,{field: 'author',edit: 'text', title: '作者', width:130}
                ,{field: 'aname', title: '文章标题', width:210}
                ,{field: 'time', title: '发表时间', width:210, sort: true}
                ,{field: 'look', title: '访问量', width:100,sort: true}
                ,{field: 'skr', title: '点赞量', width: 100, sort: true}
                ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}

            ]]
            ,limit:12
            ,limits:[10, 20, 30, 40, 50]
            ,page:true
        });

        $(".search-fans").click(function () {
            $(".content").empty().append($('<table id="demo" lay-filter="demo"></table>'));
            table.render({
                elem: '#demo'
                ,height: 550
                ,url: '/getfans.action' //数据接口
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:150, sort: true, fixed: 'left'}
                    ,{field: 'name', title: '用户名', width:180}
                    ,{field: 'allfans', title: '总粉丝量', width:260,sort: true}
                    ,{field: 'addfans', title: '增加粉丝量', width:260, sort: true}
                    ,{field: 'delfans', title: '减少粉丝量', width:260,sort: true}
//                    ,{field: 'skr', title: '点赞量', width: 100, sort: true}
//                    ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}

                ]]
                ,limit:12
                ,limits:[10, 20, 30, 40, 50]
                ,page:true
            });
        })
        table.on('edit(demo)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });

    })

</script>
<script>
layui.use('table', function(){
var table = layui.table;

//监听单元格编辑
table.on('edit(demo)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});
});
</script>
<script>
    var $=layui.jquery;
    $(document).ready(
        $.ajax({
            url:"getadmin.action",
            type:"GET",
            dataType:"json"
        }).done(function (data) {
            console.log(data.headimg);
            $(".admin").html('<img src="/img/'+data.headimg+'" class="layui-nav-img">'+data.aname);
        })
    )

</script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>
</body>
</html>